<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生练习数据分析</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f0f8ff;
            color: #333;
        }

        .container {
            display: grid;
            grid-template-areas:
                "logo header header"
                "sidebar main main"
                "sidebar main main";
            grid-template-columns: 1fr 2fr 2fr;
            grid-template-rows: 1fr 1fr 2fr;
            gap: 10px;
            padding: 10px;
            height: 100vh;
        }

        .logo {
            grid-area: logo;
            background-color: #87ceeb;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            flex-direction: column;
            border-radius: 10px;
        }

        .logo .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #ffffff;
            margin-bottom: 10px;
        }

        .logo .info {
            text-align: center;
        }

        .header {
            grid-area: header;
            background-color: #4682b4;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            border-radius: 10px;
        }

        .sidebar {
            grid-area: sidebar;
            background-color: #e0ffff;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            border-radius: 10px;
        }

        .sidebar .button {
            background-color: #5f9ea0;
            color: white;
            border: none;
            padding: 10px;
            text-align: center;
            cursor: pointer;
            border-radius: 5px;
        }

        .sidebar .button:hover {
            background-color: #4682b4;
        }

        .main {
            grid-area: main;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 15px;
        }

        .main .chart-container {
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 10px;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: column;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .main .chart-container canvas {
            width: 100px;
            height: 100px;
        }

        .main .chart-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
        }

    </style>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="container">
        <div class="logo">
            <div class="avatar"></div>
            <div class="info">
                <p>姓名：张三</p>
                <p>职业：学生练习分析员</p>
                <p>邮箱：zhangsan@example.com</p>
            </div>
        </div>
        <div class="header">学生练习情况分析</div>
        <div class="sidebar">
            <div class="button">更改信息</div>
            <div class="button">PK比赛</div>
            <div class="button">分析报告</div>
        </div>
        <div class="main">
            <div class="chart-container">
                <div class="chart-title">Codeforces分析</div>
                <canvas id="rating1"></canvas>
                <canvas id="problems1"></canvas>
            </div>
            <div class="chart-container">
                <div class="chart-title">Atcoder分析</div>
                <canvas id="rating2"></canvas>
                <canvas id="problems2"></canvas>
            </div>
            <div class="chart-container">
                <div class="chart-title">Luogu分析</div>
                <canvas id="rating3"></canvas>
                <canvas id="problems3"></canvas>
            </div>
            <div class="chart-container">
                <div class="chart-title">Vjudge分析</div>
                <canvas id="rating4"></canvas>
                <canvas id="problems4"></canvas>
            </div>
            <div class="chart-container">
                <div class="chart-title">NCSTOJ分析</div>
                <canvas id="rating5"></canvas>
                <canvas id="problems5"></canvas>
            </div>
            <div class="chart-container">
                <div class="chart-title">Nowcoder分析</div>
                <canvas id="rating6"></canvas>
                <canvas id="problems6"></canvas>
            </div>
        </div>
    </div>

    <script>
        const generateComparisonChart = (ctx, selfValue, maxValue, label) => {
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: [label, '剩余'],
                    datasets: [{
                        data: [selfValue, maxValue - selfValue],
                        backgroundColor: ['rgba(255, 99, 132, 0.6)', 'rgba(75, 192, 192, 0.6)'],
                        borderColor: ['rgba(255, 99, 132, 1)', 'rgba(75, 192, 192, 1)'],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function (context) {
                                    const label = context.label || '';
                                    const value = context.raw;
                                    return `${label}: ${value}`;
                                }
                            }
                        }
                    }
                }
            });
        };

        const maxValues = {
            rating: 2000,
            problems: 500
        };

        generateComparisonChart(
            document.getElementById('rating1').getContext('2d'),
            1200,
            maxValues.rating,
            'Rating'
        );
        generateComparisonChart(
            document.getElementById('problems1').getContext('2d'),
            300,
            maxValues.problems,
            '过题数'
        );

        generateComparisonChart(
            document.getElementById('rating2').getContext('2d'),
            1100,
            maxValues.rating,
            'Rating'
        );
        generateComparisonChart(
            document.getElementById('problems2').getContext('2d'),
            250,
            maxValues.problems,
            '过题数'
        );

        generateComparisonChart(
            document.getElementById('rating3').getContext('2d'),
            1000,
            maxValues.rating,
            'Rating'
        );
        generateComparisonChart(
            document.getElementById('problems3').getContext('2d'),
            200,
            maxValues.problems,
            '过题数'
        );

        generateComparisonChart(
            document.getElementById('rating4').getContext('2d'),
            900,
            maxValues.rating,
            'Rating'
        );
        generateComparisonChart(
            document.getElementById('problems4').getContext('2d'),
            150,
            maxValues.problems,
            '过题数'
        );

        generateComparisonChart(
            document.getElementById('rating5').getContext('2d'),
            800,
            maxValues.rating,
            'Rating'
        );
        generateComparisonChart(
            document.getElementById('problems5').getContext('2d'),
            100,
            maxValues.problems,
            '过题数'
        );

        generateComparisonChart(
            document.getElementById('rating6').getContext('2d'),
            700,
            maxValues.rating,
            'Rating'
        );
        generateComparisonChart(
            document.getElementById('problems6').getContext('2d'),
            50,
            maxValues.problems,
            '过题数'
        );
    </script>
</body>
</html>
